<template>
  <div class="Login">
    <div class="formBox">
      <van-cell-group class="cellGroup">
        <van-field v-model="formData.username" placeholder="请输入用户名" left-icon="user-o" />
        <van-field
          v-model="formData.password"
          placeholder="请输入密码"
          left-icon="closed-eye"
          type="password"
        />
      </van-cell-group>
    </div>
    <div class="butBox">
      <van-button type="info" class="butitem" @click="submitLogin">登录</van-button>
    </div>

    <div class="bottomReg">
      <i class="toRegister" @click="toRegister">还没有账户？注册!</i>
      <div>{{wxCode}}</div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Login",
  data() {
    return {
      wxCode: "",
      formData: {
        username: "",
        password: ""
      }
    };
  },
  created() {
    this.wxCode = sessionStorage.getItem("wxCode");
  },
  methods: {
    toRegister() {
      this.$router.push("/register");
    },

    submitLogin() {
      this.post("publicUser/loginPublicUser", {
        wxid: JSON.parse(sessionStorage.getItem("userInfo")).openId
      })
        .then(res => {
          console.log(res);
          if (res.success) {
            sessionStorage.setItem("isAuth",res.success);
            this.$router.push("/home");
          }
        })
        .catch(err => {
          console.log(err.toString());
        });
    }
  }
};
</script>
<style lang="scss" scoped>
@import "~@/smobile.scss";
.Login {
  background-image: url("../assets/loginBG.jpg");
  background-repeat: no-repeat;
  background-size: cover;

  .formBox {
    margin: $sm-img-per-xxm;
    padding: 0;
    .cellGroup {
      border-radius: 10%;
    }
  }

  .butBox {
    margin: $sm-spacing-col-base 0 $sm-spacing-col-base 0;
    display: flex;
    justify-content: center;
    align-items: center;

    .butitem {
      width: $sm-img-per-xxxl;
    }
  }

  .bottomReg {
    bottom: $sm-spacing-col-xxl;
    position: absolute;
    width: $sm-img-per-max;
    text-align: center;
    white-space: nowrap;
    z-index: 3;
    .toRegister {
      font-style: normal;
      text-decoration: $sm-text-color-inverse underline;
      color: $sm-text-color-inverse;
    }
  }
}
</style>